<!DOCTYPE html>

<!-- $Id$ -->

<html lang="ru">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../sources/red.sparkle.css" rel="stylesheet" type="text/css"/>
<!--[if IE]><link href="../sources/red.sparkle.ie.css" rel="stylesheet" type="text/css"/><![endif]-->

</head>

<body class="margin">

<h1 style="color: #ff8080; height: 60px; line-height: 60px; padding-left: 70px; background: url() left center no-repeat;">RED SPARKLE</h1>
<hr/>

<div class="right shaded qr margin border-shaded" style="background: #fff;">
	<div class="margin">
		<h2>.qr .right .shaded .margin .border-shaded</h2>
		<p>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>		
	</div>
</div>

<h1>Lorem ipsum <span>dolor</span> sit amet<br/>test for line-height</h1>
<p>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>
<h2>Mel cu porro omnium philosophia<br/>test for line-height</h2>
<p>Mel cu porro omnium philosophia. Cu sed exerci senserit, legimus denique blandit qui eu. Summo accusamus corrumpit ad vel. Sit mutat audiam ex. Natum molestiae ex pro, sint facete ex sea, ei quod illud invenire sea.</p>
<h3>Explicari consulatu quaerendum quo ei<br/>test for line-height</h3>
<p>Explicari consulatu quaerendum quo ei, eu est graece persecuti necessitatibus, altera omnesque petentium his ne. Delectus constituam ne nec, te periculis dissentiunt mei, euripidis vulputate eam in. Ne nec modo assentior definitiones. Ne clita indoctum quo, in vel modus error epicurei, mei dicta consectetuer mediocritatem ex. Eu pro quando consectetuer.</p>
<h4>Vix te lobortis suscipiantur delicatissimi<br/>test for line-height</h4>
<p>Vix te lobortis suscipiantur delicatissimi. Duo eros graeci alienum ex. Hendrerit adversarium vix at. Ne facilis lucilius hendrerit pro, audire senserit consequat ne est. No est doming recusabo vulputate, deseruisse delicatissimi at vel.</p>
<h5>Nec meis omittam torquatos ut<br/>test for line-height</h5>
<p>Nec meis omittam torquatos ut, eum id percipit fabellas oportere. Has nullam praesent no, cu natum delectus senserit vim. Mea saperet singulis ex, ex sit vidisse alterum nonumes. Dictas delenit salutatus nec ad, quo ad munere dolore. In quot utinam euismod sit, cu vel legere sanctus.</p>
<h6>Doming everti imperdiet vix id<br/>test for line-height</h6>
<p>Doming everti imperdiet vix id, his augue ludus numquam te, cu quem solet conceptam sea. Ex discere assueverit sed, his quis invidunt reprehendunt in. Idque mucius malorum pri an, omnesque pertinacia et mea. Cu has harum bonorum. Ignota constituam an cum.</p>

<div class="left shaded qr margin-right margin-bottom" style="background: #fff;">
	<div class="margin">
		<h2>.margin-right .margin-bottom</h2>
		<p>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>		
	</div>
</div>

<h1>Text formating tags</h1>
<p>Lorem <b>ipsum <i>dolor</i></b> sit amet, at pro <u>ferri</u> deleniti <a href="#">moderatius</a>, <q>ea qui dicit regione</q>. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>
<p><small>Mel cu porro omnium philosophia. Cu sed exerci senserit, legimus denique blandit qui eu. Summo accusamus corrumpit ad vel. Sit mutat audiam ex. Natum molestiae ex pro, sint facete ex sea, ei quod illud invenire sea.</small></p>
<p>Explicari <em>consulatu quaerendum</em> quo ei, eu est graece persecuti <tt>necessitatibus</tt>, altera omnesque petentium his ne. Delectus constituam ne nec, te <s>periculis</s> dissentiunt mei, euripidis vulputate eam in. Ne nec modo assentior definitiones. Ne clita indoctum quo, in vel modus error epicurei, mei dicta consectetuer mediocritatem ex. Eu pro quando consectetuer.</p>
<div class="clear"></div>
<p><blockquote>Vix te lobortis suscipiantur delicatissimi. Duo eros graeci alienum ex. Hendrerit adversarium vix at.<br/>Ne facilis lucilius hendrerit pro, audire senserit consequat ne est.<br/>No est doming recusabo vulputate, deseruisse delicatissimi at vel.</blockquote></p>
<p>Nec meis omittam torquatos ut, eum id percipit fabellas oportere. Has nullam praesent no, cu natum delectus senserit vim. Mea saperet singulis ex, ex sit vidisse alterum nonumes. Dictas delenit salutatus nec ad, quo ad munere dolore. In quot utinam euismod sit, cu vel legere sanctus.</p>
<h2>E = mc<sup>2</sup></h2>
<p><cite>Doming everti imperdiet vix id, his augue ludus numquam te, cu quem solet conceptam sea. Ex discere assueverit sed, his quis invidunt reprehendunt in. Idque mucius malorum pri an, omnesque pertinacia et mea. Cu has harum bonorum. Ignota constituam an cum.</cite></p>
<h2>&lt;pre&gt;</h2>
<pre>function hello() {
	console.log('hello world!')
}
</pre>
<h2>&lt;code&gt;</h2>
<code>function hello() {
	console.log('hello world!')
}
</code>

<h2>.half .justify</h2>
<div class="half justify">
<p>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>
<p>Mel cu porro omnium philosophia. Cu sed exerci senserit, <span class="red">.red</span> legimus denique blandit qui eu. Summo accusamus corrumpit ad vel. Sit mutat audiam ex. Natum molestiae ex pro, sint facete ex sea, ei quod illud invenire sea.</p>
<p>Explicari consulatu quaerendum quo ei, eu est graece persecuti necessitatibus, altera omnesque petentium his ne. Delectus constituam ne nec, te periculis dissentiunt mei, euripidis vulputate eam in. Ne nec modo assentior definitiones. Ne clita indoctum quo, in vel modus error epicurei, mei dicta consectetuer mediocritatem ex. Eu pro quando consectetuer.</p>
<h2 class="center">.center</h2>
<p>Vix te lobortis suscipiantur delicatissimi. Duo eros graeci alienum ex. Hendrerit adversarium vix at. Ne facilis lucilius hendrerit pro, audire senserit consequat ne est. No est doming recusabo vulputate, deseruisse delicatissimi at vel.</p>
<p><a href="http://flickr.com" class="left margin-right" target="_blank"><img class="border" src="http://farm5.static.flickr.com/4011/4221063665_ea567c6365_t.jpg"/></a> <b>.border</b> Nec meis omittam torquatos ut, eum id percipit fabellas oportere. Has <span class="green">.green</span> nullam praesent no, cu natum delectus senserit vim. Mea saperet singulis ex, ex sit vidisse alterum nonumes. Dictas delenit salutatus nec ad, quo ad munere dolore. In quot utinam euismod sit, cu vel legere sanctus.</p>
<p>Doming everti imperdiet vix id, his augue ludus numquam te, cu quem solet conceptam sea. Ex discere assueverit sed, his quis invidunt reprehendunt in. Idque mucius malorum pri an, omnesque pertinacia et mea. Cu has harum bonorum. Ignota constituam an cum.</p>
</div>

<h1>Anchors</h1>
<p>
	<a href="#">default</a><br/>
	<a href="#" class="external">external</a><br/>
	<a href="#" class="email">email</a><br/>
	<a href="#" class="pdf">pdf</a><br/>
	<a href="#" class="zip">zip</a><br/>
	<a href="#" class="xls">xls</a><br/>
	<a href="#" class="doc">doc</a><br/>
</p>

<h1>Quotes</h1>
<p>
French: <q lang="fr">Ce que femme veut, Dieu le veut</q>.<br/>
German: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.<br/>
English: <q lang="en">То be or not to be</q>.<br/>
Russian: <q lang="ru">День начался хорошо, а потом я проснулся</q>.<br/>
Default: <q>Едва ли возможно и преклоняться перед авторами и превзойти их</q>.
</p>

<h1>Lists</h1>

<p>

<b>Unordered list</b>

<ul>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Mel cu porro omnium philosophia</li>
	<li>Explicari consulatu quaerendum quo ei</li>
	<li>Vix te lobortis suscipiantur delicatissimi</li>
	<li>Nec meis omittam torquatos ut</li>
	<li>Doming everti imperdiet vix id</li>
</ul>

<b>Ordered list</b>

<ol>
	<li>Lorem ipsum dolor sit amet</li>
	<li>Mel cu porro omnium philosophia</li>
	<li>Explicari consulatu quaerendum quo ei</li>
	<li>Vix te lobortis suscipiantur delicatissimi</li>
	<li>Nec meis omittam torquatos ut</li>
	<li>Doming everti imperdiet vix id</li>
</ol>

<b>.no-bullets</b>

<ol class="no-bullets">
	<li>Lorem ipsum dolor sit amet</li>
	<li>Mel cu porro omnium philosophia</li>
	<li>Explicari consulatu quaerendum quo ei</li>
	<li>Vix te lobortis suscipiantur delicatissimi</li>
	<li>Nec meis omittam torquatos ut</li>
	<li>Doming everti imperdiet vix id</li>
</ol>

<b>ul.bread-crumbs</b>

<ul class="bread-crumbs">
	<li><a href="#">Lorem ipsum dolor sit amet</a></li>
	<li><a href="#">Mel cu porro omnium</a></li>
	<li><a href="#">Vix te lobortis</a></li>
	<li>Doming everti imperdiet vix id</li>
</ul>

</p>

<div class="right stroked qr">
	<div class="margin">
		<h2>.stroked</h2>
		<p>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>
	</div>
</div>


<h1>Lists of definitions</h1>
<p><dl>
	<dt>Lorem ipsum dolor sit amet</dt>
	<dd>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</dd>
	<dt>Mel cu porro omnium philosophia</dt>
	<dd>Mel cu porro omnium philosophia. Cu sed exerci senserit, legimus denique blandit qui eu. Summo accusamus corrumpit ad vel. Sit mutat audiam ex. Natum molestiae ex pro, sint facete ex sea, ei quod illud invenire sea.</dd>
	<dt>Explicari consulatu quaerendum quo ei</dt>
	<dd>Explicari consulatu quaerendum quo ei, eu est graece persecuti necessitatibus, altera omnesque petentium his ne. Delectus constituam ne nec, te periculis dissentiunt mei, euripidis vulputate eam in. Ne nec modo assentior definitiones. Ne clita indoctum quo, in vel modus error epicurei, mei dicta consectetuer mediocritatem ex. Eu pro quando consectetuer.</dd>
	<dt>Vix te lobortis suscipiantur delicatissimi</dt>
	<dd>Vix te lobortis suscipiantur delicatissimi. Duo eros graeci alienum ex. Hendrerit adversarium vix at. Ne facilis lucilius hendrerit pro, audire senserit consequat ne est. No est doming recusabo vulputate, deseruisse delicatissimi at vel.</dd>
	<dt>Nec meis omittam torquatos ut</dt>
	<dd>Nec meis omittam torquatos ut, eum id percipit fabellas oportere. Has nullam praesent no, cu natum delectus senserit vim. Mea saperet singulis ex, ex sit vidisse alterum nonumes. Dictas delenit salutatus nec ad, quo ad munere dolore. In quot utinam euismod sit, cu vel legere sanctus.</dd>
	<dt>Doming everti imperdiet vix id</dt>
	<dd>Doming everti imperdiet vix id, his augue ludus numquam te, cu quem solet conceptam sea. Ex discere assueverit sed, his quis invidunt reprehendunt in. Idque mucius malorum pri an, omnesque pertinacia et mea. Cu has harum bonorum. Ignota constituam an cum.</dd>
</dl></p>

<h1>Tables</h1>

<p><b>.simple</b>
<table class="simple">
	<tr>
		<th>Fruit</th>
		<th>Rating</th>
	</tr>
	<tr>
		<td>Apples</td>
		<td>44%</td>
	</tr>
	<tr>
		<td>Bananas</td>
		<td>23%</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>13%</td>
	</tr>
	<tr>
		<td>Other</td>
		<td>10%</td>
	</tr>
</table>
</p>

<p><b>.wide .simple</b>
<table class="wide simple">
	<tr>
		<th>Fruit</th>
		<th>Rating</th>
	</tr>
	<tr>
		<td>Apples</td>
		<td>44%</td>
	</tr>
	<tr>
		<td>Bananas</td>
		<td>23%</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>13%</td>
	</tr>
	<tr>
		<td>Other</td>
		<td>10%</td>
	</tr>
</table>
</p>

<p><b>.soft</b>
<table class="soft">
	<tr>
		<th>Fruit</th>
		<th>Rating</th>
	</tr>
	<tr>
		<td>Apples</td>
		<td>44%</td>
	</tr>
	<tr>
		<td>Bananas</td>
		<td>23%</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>13%</td>
	</tr>
	<tr>
		<td>Other</td>
		<td>10%</td>
	</tr>
</table>
</p>

<p><b>.layout</b>
<table class="layout">
	<tr>
		<th>Fruit</th>
		<th>Rating</th>
	</tr>
	<tr>
		<td>Apples</td>
		<td>44%</td>
	</tr>
	<tr>
		<td>Bananas</td>
		<td>23%</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>13%</td>
	</tr>
	<tr>
		<td>Other</td>
		<td>10%</td>
	</tr>
</table>
</p>

<p><b>.form</b>
<table class="form">
	<tr>
		<th>Your name:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Age:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Gender:</th>
		<td><select><option value="m">male</option><option value="f">female</option></select></td>
	</tr>
	<tr>
		<th></th>
		<td><button>Save</button></td>
	</tr>
</table>
</p>

<p><b>default</b>
<table>
	<tr>
		<th>Fruit</th>
		<th>Rating</th>
	</tr>
	<tr>
		<td>Apples</td>
		<td>44%</td>
	</tr>
	<tr>
		<td>Bananas</td>
		<td>23%</td>
	</tr>
	<tr>
		<td>Oranges</td>
		<td>13%</td>
	</tr>
	<tr>
		<td>Other</td>
		<td>10%</td>
	</tr>
</table>
</p>

<h1>Forms and controls</h1>

<p><b>default</b>
<form><table class="form">
	<tr>
		<th>Your name:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Age:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Gender:</th>
		<td><select><option value="m">male</option><option value="f">female</option></select></td>
	</tr>
	<tr>
		<th></th>
		<td><button>Save</button></td>
	</tr>
</table></form>
</p>

<p><b>.controls</b>
<form class="controls"><table class="form">
	<tr>
		<th>Your name:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Age:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Gender:</th>
		<td><select><option value="m">male</option><option value="f">female</option></select></td>
	</tr>
	<tr>
		<th></th>
		<td><button>Save</button></td>
	</tr>
</table></form>
</p>

<p><b>.controls .shaded-controls</b>
<form class="controls shaded-controls"><table class="form">
	<tr>
		<th>Your name:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Age:</th>
		<td><input class="field"/></td>
	</tr>
	<tr>
		<th>Gender:</th>
		<td><select><option value="m">male</option><option value="f">female</option></select></td>
	</tr>
	<tr>
		<th></th>
		<td><button>Save</button></td>
	</tr>
</table></form>

<p><b>.controls fieldset</b>
<form class="controls">
  <fieldset class="qr">
     <legend>Набор правил</legend>
     <input type="checkbox"> правило 1<br/>
     <input type="checkbox"> правило 2<br/>
     <input type="checkbox"> правило 3<br/>
  </fieldset>
</form>
</p>

<h1>ul.nav-vertical</h1>

<div>
	<ul class="nav-vertical left margin-right" style="width: 14em;">
		<li><a>Lorem ipsum dolor sit amet</a></li>
		<li class="current"><a>Mel cu porro omnium philosophia</a></li>
		<li><a>Explicari consulatu quaerendum quo ei</a></li>
		<li><a>Vix te lobortis suscipiantur delicatissimi</a></li>
		<li><a>Nec meis omittam torquatos ut</a></li>
		<li><a>Doming everti imperdiet vix id</a></li>
	</ul>
	<div class="left half">
		<p>Lorem ipsum dolor sit amet, at pro ferri deleniti moderatius, ea qui dicit regione. Sed ferri mundi tempor ei. Cum ex iuvaret eripuit propriae, eam cu primis malorum contentiones, ius luptatum verterem gubergren an. In ludus mandamus qui, vix eu movet argumentum, eam quas epicurei dissentiet ea. Mel ne eligendi euripidis consectetuer, eu error quidam gloriatur nec. Ut his dico elaboraret omittantur.</p>
		<p>Mel cu porro omnium philosophia. Cu sed exerci senserit, legimus denique blandit qui eu. Summo accusamus corrumpit ad vel. Sit mutat audiam ex. Natum molestiae ex pro, sint facete ex sea, ei quod illud invenire sea.</p>
		<p>Explicari consulatu quaerendum quo ei, eu est graece persecuti necessitatibus, altera omnesque petentium his ne. Delectus constituam ne nec, te periculis dissentiunt mei, euripidis vulputate eam in. Ne nec modo assentior definitiones. Ne clita indoctum quo, in vel modus error epicurei, mei dicta consectetuer mediocritatem ex. Eu pro quando consectetuer.</p>
	</div>
	<div class="clear"></div>
</div>

</body>

</html>